<template>
  <div class="role-dialog">
    <el-dialog :visible.sync="visible" destroy-on-close>
      <div class="panelWrap role-dialog-content">
        <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
          <div>{{ isEdit ? '修改系统角色' : '添加系统角色' }}</div>
          <i class="el-icon-close" @click="handleCloseDialog" />
        </div>

        <div class="role-content">
          <div class="m-b-10 m-t-20 flex role-header">
            <div class="checkbox flexdc flexcenter">
              <el-checkbox-group
                v-model="systemList"
                class="group flexcenter flexwrap"
                @change="handleChange"
              >
                <div v-for="(item, i) in sysList" :key="i" class="checkss">
                  <div v-if="item.id === 1">
                    <el-checkbox
                      :class="`check${i} checks`"
                      :label="item.id"
                      @change="handleChange1"
                    >
                      {{ item.name }}
                      <el-checkbox-group v-model="checked11" class="checkgou" @change="handleChangeGroup">
                        <el-checkbox @change="handleChangeGroup1">是否可用</el-checkbox>
                      </el-checkbox-group>
                    </el-checkbox>
                  </div>

                  <el-checkbox
                    v-if="item.id === 2"
                    :class="`check${i} checks`"
                    :label="item.id"
                    @change="handleChange2"
                  >
                    {{ item.name }}
                    <el-checkbox-group v-model="checked22" class="checkgou" @change="handleChangeGroup">
                      <el-checkbox @change="handleChangeGroup2">是否可用</el-checkbox>
                    </el-checkbox-group>
                  </el-checkbox>

                  <el-checkbox
                    v-if="item.id === 3"
                    :class="`check${i} checks`"
                    :label="item.id"
                    @change="handleChange3"
                  >
                    {{ item.name }}

                    <el-checkbox-group v-model="checked33" class="checkgou" @change="handleChangeGroup">
                      <el-checkbox @change="handleChangeGroup3">是否可用</el-checkbox>
                    </el-checkbox-group>
                  </el-checkbox>

                  <el-checkbox
                    v-if="item.id === 4"
                    :class="`check${i} checks`"
                    :label="item.id"
                    @change="handleChange4"
                  >
                    {{ item.name }}

                    <el-checkbox-group v-model="checked44" class="checkgou" @change="handleChangeGroup">
                      <el-checkbox @change="handleChangeGroup4">是否可用</el-checkbox>
                    </el-checkbox-group>
                  </el-checkbox>

                  <el-checkbox
                    v-if="item.id === 5"
                    :class="`check${i} checks`"
                    :label="item.id"
                    @change="handleChange5"
                  >
                    {{ item.name }}

                    <el-checkbox-group v-model="checked55" class="checkgou" @change="handleChangeGroup">
                      <el-checkbox @change="handleChangeGroup5">是否可用</el-checkbox>
                    </el-checkbox-group>
                  </el-checkbox>

                  <el-checkbox
                    v-if="item.id === 6"
                    :class="`check${i} checks`"
                    :label="item.id"
                    @change="handleChange6"
                  >
                    {{ item.name }}

                    <el-checkbox-group v-model="checked66" class="checkgou" @change="handleChangeGroup">
                      <el-checkbox @change="handleChangeGroup6">是否可用</el-checkbox>
                    </el-checkbox-group>
                  </el-checkbox>

                  <el-checkbox
                    v-if="item.id === 7"
                    :class="`check${i} checks`"
                    :label="item.id"
                    @change="handleChange7"
                  >
                    {{ item.name }}

                    <el-checkbox-group v-model="checked77" class="checkgou" @change="handleChangeGroup">
                      <el-checkbox @change="handleChangeGroup7">是否可用</el-checkbox>
                    </el-checkbox-group>
                  </el-checkbox>

                  <el-checkbox
                    v-if="item.id === 8"
                    :class="`check${i} checks`"
                    :label="item.id"
                    @change="handleChange8"
                  >
                    {{ item.name }}

                    <el-checkbox-group v-model="checked88" class="checkgou" @change="handleChangeGroup">
                      <el-checkbox @change="handleChangeGroup8">是否可用</el-checkbox>
                    </el-checkbox-group>
                  </el-checkbox>

                  <el-checkbox
                    v-if="item.id === 9"
                    :class="`check${i} checks`"
                    :label="item.id"
                    @change="handleChange9"
                  >
                    {{ item.name }}

                    <el-checkbox-group v-model="checked99" class="checkgou" @change="handleChangeGroup">
                      <el-checkbox @change="handleChangeGroup9">是否可用</el-checkbox>
                    </el-checkbox-group>
                  </el-checkbox>
                </div>
                <!-- <el-checkbox
                  v-for="(item, i) in sysList"
                  :key="i"
                  :class="`check${i} checks`"
                  :label="item.id"
                >
                  {{ item.name }}

                  <el-checkbox-group v-model="displayTypes" class="checkgou" @change="handleChangeGroup">
                    <el-checkbox :label="item.id">是否可用</el-checkbox>
                  </el-checkbox-group>
                </el-checkbox> -->
              </el-checkbox-group>
              <div v-for="(item, i) in sysList" :key="i" class="flex">
                <div v-if="item.id === 1" :class="`grow${item.id} panelWrap tree-grow m-t-10`">
                  <div class="check-title flex fs14 cfff fwb pl p-r-20">
                    <div>基础数据菜单权限</div>
                  </div>
                  <div class="sysTree">
                    <el-tree
                      ref="tree1"
                      class="left-tree coTree"
                      :current-node-key="0"
                      :data="setTree1"
                      :props="defaultProps"
                      :node-key="NODE_KEY"
                      :default-expanded-keys="[105]"
                      :show-checkbox="true"
                      :highlight-current="true"
                      :default-checked-keys="checked1"
                      @check="handleCheckChange(1)"
                    >
                      <span slot-scope="{ node, data }" class="custom-tree-node">
                        <span>{{ node.label }}</span>
                        <el-checkbox v-model="data.displayType" class="check" @change="handleCheckTree(data)">是否可用</el-checkbox>
                      </span>
                    </el-tree>
                  </div>
                </div>
                <div v-if="item.id === 2" :class="`grow${item.id} panelWrap tree-grow m-t-10`">
                  <div class="check-title flex fs14 cfff fwb pl p-r-20">
                    <div>维保备案菜单权限</div>
                  </div>
                  <div class="sysTree">
                    <el-tree
                      ref="tree2"
                      class="left-tree coTree"
                      :current-node-key="0"
                      :data="setTree2"
                      :props="defaultProps"
                      :node-key="NODE_KEY"
                      :default-expanded-keys="[1]"
                      :show-checkbox="true"
                      :highlight-current="true"
                      :default-checked-keys="checked2"
                      @check="handleCheckChange(2)"
                    >
                      <span slot-scope="{ node, data }" class="custom-tree-node">
                        <span>{{ node.label }}</span>
                        <el-checkbox v-model="data.displayType" @change="handleCheckTree(data)">是否可用</el-checkbox>
                      </span>
                    </el-tree>
                  </div>
                </div>
                <div v-if="item.id === 3" :class="`grow${item.id} panelWrap tree-grow m-t-10`">
                  <div class="check-title flex fs14 cfff fwb pl p-r-20">
                    <div>维保管理菜单权限</div>
                  </div>
                  <div class="sysTree">
                    <el-tree
                      ref="tree3"
                      class="left-tree coTree"
                      :current-node-key="0"
                      :data="setTree3"
                      :props="defaultProps"
                      :node-key="NODE_KEY"
                      :default-expanded-keys="[107]"
                      :show-checkbox="true"
                      :highlight-current="true"
                      :default-checked-keys="checked3"
                      @check="handleCheckChange(3)"
                    >
                      <span slot-scope="{ node, data }" class="custom-tree-node">
                        <span>{{ node.label }}</span>
                        <el-checkbox v-model="data.displayType" @change="handleCheckTree(data)">是否可用</el-checkbox>
                      </span>
                    </el-tree>
                  </div>
                </div>
                <div v-if="item.id === 4" :class="`grow${item.id} panelWrap tree-grow m-t-10`">
                  <div class="check-title flex fs14 cfff fwb pl p-r-20">
                    <div>凌波运营菜单权限</div>
                  </div>
                  <div class="sysTree">
                    <el-tree
                      ref="tree4"
                      class="left-tree coTree"
                      :current-node-key="0"
                      :data="setTree4"
                      :props="defaultProps"
                      :node-key="NODE_KEY"
                      :default-expanded-keys="[106]"
                      :show-checkbox="true"
                      :highlight-current="true"
                      :default-checked-keys="checked4"
                      @check="handleCheckChange(4)"
                    >
                      <span slot-scope="{ node, data }" class="custom-tree-node">
                        <span>{{ node.label }}</span>
                        <el-checkbox v-model="data.displayType" @change="handleCheckTree(data)">是否可用</el-checkbox>
                      </span>
                    </el-tree>
                  </div>
                </div>
                <div v-if="item.id === 5" :class="`grow${item.id} panelWrap tree-grow m-t-10`">
                  <div class="check-title flex fs14 cfff fwb pl p-r-20">
                    <div>政府管理菜单权限</div>
                  </div>
                  <div class="sysTree">
                    <el-tree
                      ref="tree5"
                      class="left-tree coTree"
                      :current-node-key="0"
                      :data="setTree5"
                      :props="defaultProps"
                      :node-key="NODE_KEY"
                      :default-expanded-keys="[167]"
                      :show-checkbox="true"
                      :highlight-current="true"
                      :default-checked-keys="checked5"
                      @check="handleCheckChange(5)"
                    >
                      <span slot-scope="{ node, data }" class="custom-tree-node">
                        <span>{{ node.label }}</span>
                        <el-checkbox v-model="data.displayType" @change="handleCheckTree(data)">是否可用</el-checkbox>
                      </span>
                    </el-tree>
                  </div>
                </div>
                <div v-if="item.id === 6" :class="`grow${item.id} panelWrap tree-grow m-t-10`">
                  <div class="check-title flex fs14 cfff fwb pl p-r-20">
                    <div>大数据菜单权限</div>
                  </div>
                  <div class="sysTree">
                    <el-tree
                      ref="tree6"
                      class="left-tree coTree"
                      :current-node-key="0"
                      :data="setTree6"
                      :props="defaultProps"
                      :node-key="NODE_KEY"
                      :default-expanded-keys="[177]"
                      :show-checkbox="true"
                      :highlight-current="true"
                      :default-checked-keys="checked6"
                      @check="handleCheckChange(6)"
                    >
                      <span slot-scope="{ node, data }" class="custom-tree-node">
                        <span>{{ node.label }}</span>
                        <el-checkbox v-model="data.displayType" @change="handleCheckTree(data)">是否可用</el-checkbox>
                      </span>
                    </el-tree>
                  </div>
                </div>
                <div v-if="item.id === 7" :class="`grow${item.id} panelWrap tree-grow m-t-10`">
                  <div class="check-title flex fs14 cfff fwb pl p-r-20">
                    <div>物联网菜单权限</div>
                  </div>
                  <div class="sysTree">
                    <el-tree
                      ref="tree7"
                      class="left-tree coTree"
                      :current-node-key="0"
                      :data="setTree7"
                      :props="defaultProps"
                      :node-key="NODE_KEY"
                      :default-expanded-keys="[212]"
                      :show-checkbox="true"
                      :highlight-current="true"
                      :default-checked-keys="checked7"
                      @check="handleCheckChange(7)"
                    >
                      <span slot-scope="{ node, data }" class="custom-tree-node">
                        <span>{{ node.label }}</span>
                        <el-checkbox v-model="data.displayType" @change="handleCheckTree(data)">是否可用</el-checkbox>
                      </span>
                    </el-tree>
                  </div>
                </div>
                <div v-if="item.id === 8" :class="`grow${item.id} panelWrap tree-grow m-t-10`">
                  <div class="check-title flex fs14 cfff fwb pl p-r-20">
                    <div>智慧小区菜单权限</div>
                  </div>
                  <div class="sysTree">
                    <el-tree
                      ref="tree8"
                      class="left-tree coTree"
                      :current-node-key="0"
                      :data="setTree8"
                      :props="defaultProps"
                      :node-key="NODE_KEY"
                      :default-expanded-keys="[218]"
                      :show-checkbox="true"
                      :highlight-current="true"
                      :default-checked-keys="checked8"
                      @check="handleCheckChange(8)"
                    >
                      <span slot-scope="{ node, data }" class="custom-tree-node">
                        <span>{{ node.label }}</span>
                        <el-checkbox v-model="data.displayType" @change="handleCheckTree(data)">是否可用</el-checkbox>
                      </span>
                    </el-tree>
                  </div>
                </div>
                <div v-if="item.id === 9" :class="`grow${item.id} panelWrap tree-grow m-t-10`">
                  <div class="check-title flex fs14 cfff fwb pl p-r-20">
                    <div>电梯保险菜单权限</div>
                  </div>
                  <div class="sysTree">
                    <el-tree
                      ref="tree9"
                      class="left-tree coTree"
                      :current-node-key="0"
                      :data="setTree9"
                      :props="defaultProps"
                      :node-key="NODE_KEY"
                      :default-expanded-keys="[]"
                      :show-checkbox="true"
                      :highlight-current="true"
                      :default-checked-keys="checked9"
                      @check="handleCheckChange(9)"
                    >
                      <span slot-scope="{ node, data }" class="custom-tree-node">
                        <span>{{ node.label }}</span>
                        <el-checkbox v-model="data.displayType" @change="handleCheckTree(data)">是否可用</el-checkbox>
                      </span>
                    </el-tree>
                  </div>
                </div>
              </div>
            </div>
            <div class="m-l-80 m-t-40 flex flexdc">
              <div class="roleName m-t-10">
                <span class="roleName-name m-l-20"><span class="mustval">*</span>角色名称：</span>
                <el-input v-model.trim="form.name" placeholder="请输入角色名称" class="roleName-input" />
              </div>
              <div class="roleName m-t-30">
                <span class="roleName-name m-l-20"><span class="mustval">*</span>机构名称：</span>
                <el-input v-model.trim="form.orgName" readonly placeholder="请选择机构" class="roleName-input" />
                <el-button type="warning" class="iconfont icon-xuanze m-l-20" @click="handleSelect">选择机构</el-button>
              </div>
              <div class="role-find flex flexac m-t-40">
                <span class="m-l-10">角色类型：</span>
                <el-radio-group v-model="form.type" class="find-radio">
                  <el-radio label="普通角色" />
                  <el-radio label="维保人员" />
                </el-radio-group>
              </div>
              <!-- <div class="role-find flex flexac m-t-40">
                <span class="m-l-10">权限类型：</span>
                <el-radio-group v-model="form.isDataRole" class="find-radio">
                  <el-radio label="功能权限" />
                  <el-radio label="数据权限" />
                </el-radio-group>
              </div> -->
              <div class="role-find flex flexac m-t-40">
                <span class="m-l-10">角色查看数据范围：</span>
                <el-radio-group v-model="form.range" class="find-radio">
                  <el-radio label="本人" />
                  <el-radio label="本机构" />
                  <el-radio label="本机构及其下级机构" />
                </el-radio-group>
              </div>
            </div>
          </div>
          <div class="footer-btn flex flexac flextc m-b-40 m-t-20">
            <div class="btnBox">
              <el-button v-if="!isEdit" class="saveBtn btn m-r-20 el-icon-circle-check" @click="handleSave">保 存</el-button>
              <el-button v-else class="btn m-r-20 el-icon-circle-check" type="success" @click="handleEdit">更 新</el-button>
              <el-button class="btn m-t-30 el-icon-circle-close" type="warning" @click="handleCloseDialog">取 消</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <SelectOrg v-model="selectVisible" @update="handleSelectUpdate" />
  </div>

</template>

<script>

import { createRoleAdd, updateRole } from '@/api/baseInfo/authority/role'
import SelectOrg from '@/components/selectOrg/index'
import { findPlatforms } from '@/api/baseInfo/authority/resources'
// import { findSysList } from '@/api/baseInfo/authority/sys'
import { findMenuList } from '@/api/baseInfo/authority/menu'
import { showNotice, formatDateTime, transData } from '@/utils/toolclass'
import storage from '@/utils/storage'

export default {
  name: 'Role',
  components: { SelectOrg },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    datarole: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      sysList: [],
      systemList: [],
      checked11: false,
      checked22: false,
      checked33: false,
      checked44: false,
      checked55: false,
      checked66: false,
      checked77: false,
      checked88: false,
      checked99: false,
      menuRightList: [],
      selectVisible: false,
      visible: false,
      checked: false,
      disTypeList: [],
      dataList: [],
      formOrigin: {
        crtOpr: '', // 创建人ID
        dataRightList: [], // 数据权限
        isDataRole: '功能权限', // 是否数据权限（0：否；1：是）
        lstEdtOpr: '', // 最后修改人ID
        orgId: '', // 机构ID
        orgName: '', // 机构名称
        type: '普通角色',
        range: '本机构及其下级机构', // 范围（1：本人；2：本级；3：本级及下级机构；）
        id: 0, // ID
        name: '', // 角色名称
        sysRightList: [], // 平台功能权限
        displayType: 1, // 显示类型（1：可用且可显示；2：可显示但不可用；）
        menuRightList: [], // 菜单功能权限
        buttonRightList: [
          {
            buttonId: 9999,
            buttonName: '',
            displayType: 1,
            menuId: ''
          }
        ], // 按钮功能权限
        buttonId: '', // 按钮ID
        buttonName: '', // 按钮名
        menuId: '', // 菜单ID
        menuName: '', // 菜单名
        parentId: '', // 父级ID（查询)
        sort: '', // 排序号
        url: '', // URL
        sysId: '', // 系统ID
        sysName: '', // 系统名
        version: 1 // 版本号
      },
      form: { ...this.datarole },
      setTree1: [], // tree数据
      setTree2: [], // tree数据
      setTree3: [], // tree数据
      setTree4: [], // tree数据
      setTree5: [], // tree数据
      setTree6: [], // tree数据
      setTree7: [], // tree数据
      setTree8: [], // tree数据
      setTree9: [], // tree数据
      checked1: [],
      checked2: [],
      checked3: [],
      checked4: [],
      checked5: [],
      checked6: [],
      checked7: [],
      checked8: [],
      checked9: [],
      NODE_KEY: 'id', // id对应字段
      defaultProps: {// 默认设置
        children: 'children',
        label: 'name'
      },
      param: {
        id: '',
        name: '',
        pageIndex: 1,
        pageSize: 100
      },
      menu1: [],
      menu2: [],
      menu3: [],
      menu4: [],
      menu5: [],
      menu6: [],
      menu7: [],
      menu8: [],
      menu9: [],
      menus: [],
      sysMenu1: [],
      sysMenu2: [],
      sysMenu3: [],
      sysMenu4: [],
      sysMenu5: [],
      sysMenu6: [],
      sysMenu7: [],
      sysMenu8: [],
      sysMenu9: [],
      aaaa: [],
      echoData: []
    }
  },
  computed: {},
  watch: {
    visible(v) {
      this.$emit('input', v)
    },
    value(v) {
      this.visible = v
    },
    datarole(v) {
      console.log(v)
      if (v.id === 0) {
        this.form = { ...this.formOrigin }
      } else {
        this.form = { ...v }
        this.echoData = v.sysRightList
        // 平台回显
        this.systemList = v.sysRightList.map(item => item.sysId)
        // 平台是否可用回显
        const a1 = v.sysRightList.filter(item => { if (item.sysId === 1) { return item } })
        a1.map(item => { this.checked11 = item.displayType === 1 })

        const a2 = v.sysRightList.filter(item => { if (item.sysId === 2) { return item } })
        a2.map(item => { this.checked22 = item.displayType === 1 })

        const a3 = v.sysRightList.filter(item => { if (item.sysId === 3) { return item } })
        a3.map(item => { this.checked33 = item.displayType === 1 })

        const a4 = v.sysRightList.filter(item => { if (item.sysId === 4) { return item } })
        a4.map(item => { this.checked44 = item.displayType === 1 })

        const a5 = v.sysRightList.filter(item => { if (item.sysId === 5) { return item } })
        a5.map(item => { this.checked55 = item.displayType === 1 })

        const a6 = v.sysRightList.filter(item => { if (item.sysId === 6) { return item } })
        a6.map(item => { this.checked66 = item.displayType === 1 })

        const a7 = v.sysRightList.filter(item => { if (item.sysId === 7) { return item } })
        a7.map(item => { this.checked77 = item.displayType === 1 })

        const a8 = v.sysRightList.filter(item => { if (item.sysId === 8) { return item } })
        a8.map(item => { this.checked88 = item.displayType === 1 })

        const a9 = v.sysRightList.filter(item => { if (item.sysId === 9) { return item } })
        a9.map(item => { this.checked99 = item.displayType === 1 })
        // this.setTree1 = transData([item.menuRightList], 'id', 'parentId')

        // 菜单回显
        const menus1 = v.sysRightList.filter(item => { if (item.sysId === 1) { return item.menuRightList } })
        const m1 = menus1.length <= 0 ? [] : menus1[0].menuRightList.length <= 0 ? [] : menus1[0].menuRightList
        const m11 = m1.length === this.sysMenu1.length ? m1 : m1.filter(item => { if (item.menuId !== 105) { return item } })
        const sys1 = m1.length === this.sysMenu1.length ? this.sysMenu1.map(item => item.id) : m11.map(item => item.menuId)
        // this.$refs.tree1[0].setCheckedNodes(sys1)
        // console.log(this.sysMenu1, m1)
        m1.map(item => {
          this.sysMenu1.filter(item1 => {
            if (item1.id !== item.menuId) {
              this.aaaa.push({
                displayType: false,
                id: item1.id,
                name: item1.name,
                parentId: item1.parentId,
                sort: item1.sort,
                sysId: item1.sysId,
                sysName: item1.sysName,
                url: item1.url,
                version: item1.version
              })
            }
            // console.log(item1)
            // this.aaaa.push({
            //   displayType: item1.id === item.menuId ? item.displayType === 1 : false,
            //   id: item1.id,
            //   name: item1.name,
            //   parentId: item1.parentId,
            //   sort: item1.sort,
            //   sysId: item1.sysId,
            //   sysName: item1.sysName,
            //   url: item1.url,
            //   version: item1.version
            // })
            // console.log(item)
            // }
          })
        })

        this.vvv = [...new Set(this.aaaa.map(e => JSON.stringify(e)))].map(e => JSON.parse(e))
        // console.log(this.aaaa)
        // console.log(this.vvv)
        this.checked1 = sys1
        // const params = {
        //       displayType: item.menuId === item1.id,
        //       id: item1.id,
        //       name: item1.name,
        //       parentId: item1.parentId,
        //       sort: item1.sort,
        //       sysId: item1.sysId,
        //       sysName: item1.sysName,
        //       url: item1.url,
        //       version: item1.version
        //     }
        //     return params

        const menus2 = v.sysRightList.filter(item => { if (item.sysId === 2) { return item.menuRightList } })
        const m2 = menus2.length <= 0 ? [] : menus2[0].menuRightList.length <= 0 ? [] : menus2[0].menuRightList
        const m22 = m2.length === this.sysMenu2.length ? m2 : m2.filter(item => { if (item.menuId !== 1) { return item } })
        const sys2 = m2.length === this.sysMenu2.length ? this.sysMenu2.map(item => item.id) : m22.map(item => item.menuId)
        // console.log(sys2)
        // this.$refs.tree2[0].setCheckedKeys(sys2)
        this.checked2 = sys2

        const menus3 = v.sysRightList.filter(item => { if (item.sysId === 3) { return item.menuRightList } })
        const m3 = menus3.length <= 0 ? [] : menus3[0].menuRightList.length <= 0 ? [] : menus3[0].menuRightList
        const m33 = m3.length === this.sysMenu3.length ? m3 : m3.filter(item => { if (item.menuId !== 107) { return item } })
        const sys3 = m3.length === this.sysMenu3.length ? this.sysMenu3.map(item => item.id) : m33.map(item => item.menuId)
        // this.$refs.tree3[0].setCheckedKeys(sys3)
        this.checked3 = sys3

        const menus4 = v.sysRightList.filter(item => { if (item.sysId === 4) { return item.menuRightList } })
        const m4 = menus4.length <= 0 ? [] : menus4[0].menuRightList.length <= 0 ? [] : menus4[0].menuRightList
        const m44 = m4.length === this.sysMenu4.length ? m4 : m4.filter(item => { if (item.menuId !== 106) { return item } })
        const sys4 = m4.length === this.sysMenu4.length ? this.sysMenu4.map(item => item.id) : m44.map(item => item.menuId)
        // this.$refs.tree4[0].setCheckedKeys(sys4)
        this.checked4 = sys4

        const menus5 = v.sysRightList.filter(item => { if (item.sysId === 5) { return item.menuRightList } })
        const m5 = menus5.length <= 0 ? [] : menus5[0].menuRightList.length <= 0 ? [] : menus5[0].menuRightList
        const m55 = m5.length === this.sysMenu5.length ? m5 : m5.filter(item => { if (item.menuId !== 167) { return item } })
        const sys5 = m5.length === this.sysMenu5.length ? this.sysMenu5.map(item => item.id) : m55.map(item => item.menuId)
        // this.$refs.tree5[0].setCheckedKeys(sys5)
        this.checked5 = sys5

        const menus6 = v.sysRightList.filter(item => { if (item.sysId === 6) { return item.menuRightList } })
        const m6 = menus6.length <= 0 ? [] : menus6[0].menuRightList.length <= 0 ? [] : menus6[0].menuRightList
        const m66 = m6.length === this.sysMenu6.length ? m6 : m6.filter(item => { if (item.menuId !== 177) { return item } })
        const sys6 = m6.length === this.sysMenu6.length ? this.sysMenu6.map(item => item.id) : m66.map(item => item.menuId)
        // this.$refs.tree6[0].setCheckedKeys(sys6)
        this.checked6 = sys6

        const menus7 = v.sysRightList.filter(item => { if (item.sysId === 7) { return item.menuRightList } })
        const m7 = menus7.length <= 0 ? [] : menus7[0].menuRightList.length <= 0 ? [] : menus7[0].menuRightList
        const m77 = m7.length === this.sysMenu7.length ? m7 : m7.filter(item => { if (item.menuId !== 212) { return item } })
        const sys7 = m7.length === this.sysMenu7.length ? this.sysMenu7.map(item => item.id) : m77.map(item => item.menuId)
        // this.$refs.tree7[0].setCheckedKeys(sys7)
        this.checked7 = sys7

        const menus8 = v.sysRightList.filter(item => { if (item.sysId === 8) { return item.menuRightList } })
        const m8 = menus8.length <= 0 ? [] : menus8[0].menuRightList.length <= 0 ? [] : menus8[0].menuRightList
        const m88 = m8.length === this.sysMenu8.length ? m8 : m8.filter(item => { if (item.menuId !== 218 && item.menuId !== 221) { return item } })
        const sys8 = m8.length === this.sysMenu8.length ? this.sysMenu8.map(item => item.id) : m88.map(item => item.menuId)
        // console.log(sys8)
        // this.$refs.tree8[0].setCheckedKeys(sys8)
        this.checked8 = sys8

        const menus9 = v.sysRightList.filter(item => { if (item.sysId === 9) { return item.menuRightList } })
        const m9 = menus9.length <= 0 ? [] : menus9[0].menuRightList.length <= 0 ? [] : menus9[0].menuRightList
        // const m99 = m9.filter(item => { if (item.menuId !== 218) { return item } })
        const m99 = m9.length === this.sysMenu9.length ? m9 : m9.length > 0 ? m9.filter(item => { if (item.menuId !== 218) { return item } }) : []
        const sys9 = m9.length === this.sysMenu9.length ? this.sysMenu9.map(item => item.id) : m99.map(item => item.menuId)
        // this.$refs.tree9[0].setCheckedKeys(sys9)
        this.checked9 = sys9
      }
    }
  },
  created() {
    this.userInfo = JSON.parse(storage.get('userInfo'))
    this.getSystemList()
    this.handleGetSysMenu()
  },
  methods: {
    handleCheckTree(v) {
      // console.log(v)
      this.disTypeList = [...this.disTypeList, ...[v]]
      // console.log(this.disTypeList)
    },
    // 添加
    handleSave() {
      // console.log(this.form.sysRightList)
      if (!(/^\S+$/.test(this.form.name))) {
        showNotice('error', '提示', '请输入角色名称')
        return
      }
      if (!(/^\S+$/.test(this.form.orgName))) {
        showNotice('error', '提示', '请选择机构')
        return
      }

      const params = {
        crtOpr: this.form.crtOpr === '' ? this.userInfo.userId : this.form.crtOpr,
        dataRightList: [
          {
            orgId: this.form.orgId,
            orgName: this.form.orgName,
            range: this.form.range === '本人' ? 1 : this.form.range === '本机构' ? 2 : 3
          }
        ],
        id: this.form.id,
        isDataRole: this.form.isDataRole === '功能权限' ? 0 : 1,
        lstEdtOpr: this.isEdit === false ? null : this.form.lstEdtOpr === null ? this.userInfo.userId : this.form.lstEdtOpr,
        name: this.form.name,
        type: this.form.type === '普通角色' ? 1 : 2,
        sysRightList: this.form.sysRightList,
        version: this.form.version ? this.form.version : 1
      }
      // console.log(this.form.sysRightList)
      console.log(params)
      // this.handleCreateAdd(params)
    },
    handleCreateAdd(data) {
      createRoleAdd(data).then(res => {
        if (res.code === '000000') {
          showNotice('success', '提示', '添加成功!')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          if (res.msg === '失败') {
            showNotice('error', '提示', '添加失败')
          } else {
            showNotice('error', '提示', res.msg)
          }
        }
      })
    },
    // 编辑
    handleEdit() {
      console.log(this.form)
      console.log(this.v1, this.v2, this.v3)
      // if (!(/^\S+$/.test(this.form.name))) {
      //   showNotice('error', '提示', '请输入角色名称')
      //   return
      // }
      // if (!(/^\S+$/.test(this.form.orgName))) {
      //   showNotice('error', '提示', '请选择机构')
      //   return
      // }

      const params = {
        crtOpr: this.form.crtOpr === '' ? this.userInfo.userId : this.form.crtOpr,
        dataRightList: [
          {
            orgId: this.form.orgId,
            orgName: this.form.orgName,
            range: this.form.range === '本人' ? 1 : this.form.range === '本机构' ? 2 : 3
          }
        ],
        id: this.form.id,
        isDataRole: this.form.isDataRole === '功能权限' ? 0 : 1,
        lstEdtOpr: this.isEdit === false ? null : this.form.lstEdtOpr === null ? this.userInfo.userId : this.form.lstEdtOpr,
        name: this.form.name,
        type: this.form.type === '普通角色' ? 1 : 2,
        sysRightList: this.form.sysRightList,
        version: this.form.version ? this.form.version : 1
      }
      console.log(params)
      // this.handleUpdate(params)
    },
    handleUpdate(data) {
      updateRole(data).then(res => {
        if (res.code === '000000') {
          showNotice('success', '提示', '修改成功!')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          if (res.msg === '失败') {
            showNotice('error', '提示', '修改失败')
          } else {
            showNotice('error', '提示', res.msg)
          }
        }
      })
    },
    handleChangeGroup(v) {
      // console.log(v)
      this.form.sysRightList = this.form.sysRightList.map(item => {
        // console.log(item)
        const items = {
          displayType: item.displayType,
          menuRightList: item.menuRightList,
          sysId: item.sysId,
          sysName: item.sysName
        }
        return items
      })
      this.list1 = v
    },
    handleChangeGroup1(v) {
      // console.log(v)
      this.form.sysRightList = this.form.sysRightList.map(item => {
        // console.log(item)
        const items = {
          displayType: item.displayType,
          menuRightList: item.menuRightList,
          sysId: item.sysId,
          sysName: item.sysName
        }
        return items
      })
      this.v1 = v
    },
    handleChangeGroup2(v) {
      // console.log(v)
      this.form.sysRightList = this.form.sysRightList.map(item => {
        const items = {
          displayType: item.displayType,
          menuRightList: item.menuRightList,
          sysId: item.sysId,
          sysName: item.sysName
        }
        return items
      })
      this.v2 = v
    },
    handleChangeGroup3(v) {
      // console.log(v)
      this.form.sysRightList = this.form.sysRightList.map(item => {
        const items = {
          displayType: item.displayType,
          menuRightList: item.menuRightList,
          sysId: item.sysId,
          sysName: item.sysName
        }
        return items
      })
      this.v3 = v
    },
    handleChangeGroup4(v) {
      // console.log(v)
      const displayt = v === true ? 1 : 2
      this.form.sysRightList = this.form.sysRightList.map(item => {
        const items = {
          displayType: item.sysId === 4 ? displayt : item.displayType,
          menuRightList: item.menuRightList,
          sysId: item.sysId,
          sysName: item.sysName
        }
        return items
      })
      this.v4 = v
    },
    handleChangeGroup5(v) {
      // console.log(v)
      const displayt = v === true ? 1 : 2
      this.form.sysRightList = this.form.sysRightList.map(item => {
        const items = {
          displayType: item.sysId === 5 ? displayt : item.displayType,
          menuRightList: item.menuRightList,
          sysId: item.sysId,
          sysName: item.sysName
        }
        return items
      })
      this.v5 = v
    },
    handleChangeGroup6(v) {
      // console.log(v)
      const displayt = v === true ? 1 : 2
      this.form.sysRightList = this.form.sysRightList.map(item => {
        const items = {
          displayType: item.sysId === 6 ? displayt : item.displayType,
          menuRightList: item.menuRightList,
          sysId: item.sysId,
          sysName: item.sysName
        }
        return items
      })
      this.v6 = v
    },
    handleChangeGroup7(v) {
      // console.log(v)
      const displayt = v === true ? 1 : 2
      this.form.sysRightList = this.form.sysRightList.map(item => {
        const items = {
          displayType: item.sysId === 7 ? displayt : item.displayType,
          menuRightList: item.menuRightList,
          sysId: item.sysId,
          sysName: item.sysName
        }
        return items
      })
      this.v7 = v
    },
    handleChangeGroup8(v) {
      const displayt = v === true ? 1 : 2
      this.form.sysRightList = this.form.sysRightList.map(item => {
        const items = {
          displayType: item.sysId === 8 ? displayt : item.displayType,
          menuRightList: item.menuRightList,
          sysId: item.sysId,
          sysName: item.sysName
        }
        return items
      })
      this.v8 = v
    },
    handleChangeGroup9(v) {
      const displayt = v === true ? 1 : 2
      this.form.sysRightList = this.form.sysRightList.map(item => {
        const items = {
          displayType: item.sysId === 9 ? displayt : item.displayType,
          menuRightList: item.menuRightList,
          sysId: item.sysId,
          sysName: item.sysName
        }
        return items
      })
      this.v9 = v
    },
    //
    handleChange1(v) {
      if (v === false) {
        this.$refs.tree1[0].setCheckedKeys([])
      } else {
        var newArr = this.setTree11.map(item => item.id)
        this.$refs.tree1[0].setCheckedKeys(newArr)
        var menu1 = this.$refs.tree1[0].getCheckedNodes().concat(this.$refs.tree1[0].getHalfCheckedNodes())
        // console.log(menu1)
        // console.log(this.form.sysRightList)
        var visible1 = this.v1 === undefined ? 1 : this.v1 === true ? 1 : 2
        // console.log(visible2)
        var menuRightList = menu1.map(item => {
          // console.log(item)
          const items = {
            buttonRightList: this.form.buttonRightList,
            displayType: item.displayType === true ? 1 : 2,
            menuId: item.id,
            menuName: item.name,
            parentId: item.parentId,
            sort: item.sort,
            sysId: item.sysId,
            url: item.url
          }
          return items
        })
        var system1 = menu1.filter(item1 => {
          if (item1.parentId === 0) {
            return item1
          }
        })
        // console.log(system)
        this.form.sysRightList = [{
          displayType: visible1,
          menuRightList: menuRightList,
          sysId: system1[0].sysId,
          sysName: system1[0].name
        }]
        console.log(this.form.sysRightList)
      }
    },
    handleChange2(v) {
      if (v === false) {
        this.$refs.tree2[0].setCheckedKeys([])
      } else {
        var newArr = this.setTree22.map(item => item.id)
        this.$refs.tree2[0].setCheckedKeys(newArr)
        var menu2 = this.$refs.tree2[0].getCheckedNodes().concat(this.$refs.tree2[0].getHalfCheckedNodes())
        // console.log(menu2)
        // console.log(this.form.sysRightList)
        var visible2 = this.v2 === undefined ? 1 : this.v2 === true ? 1 : 2
        // console.log(visible2)
        var menuRightList = menu2.map(item => {
          // console.log(item)
          const items = {
            buttonRightList: this.form.buttonRightList,
            displayType: item.displayType === true ? 1 : 2,
            menuId: item.id,
            menuName: item.name,
            parentId: item.parentId,
            sort: item.sort,
            sysId: item.sysId,
            url: item.url
          }
          return items
        })
        var system2 = menu2.filter(item2 => {
          if (item2.parentId === 0) {
            return item2
          }
        })
        // console.log(system)
        this.form.sysRightList = [{
          displayType: visible2,
          menuRightList: menuRightList,
          sysId: system2[0].sysId,
          sysName: system2[0].name
        }]
        // console.log(this.form.sysRightList)
      }
    },
    handleChange3(v) {
      if (v === false) {
        this.$refs.tree3[0].setCheckedKeys([])
      } else {
        var newArr = this.setTree33.map(item => item.id)
        this.$refs.tree3[0].setCheckedKeys(newArr)
        var menu3 = this.$refs.tree3[0].getCheckedNodes().concat(this.$refs.tree3[0].getHalfCheckedNodes())
        // console.log(menu3)
        // console.log(this.form.sysRightList)
        var visible3 = this.v3 === undefined ? 1 : this.v3 === true ? 1 : 2
        // console.log(visible3)
        var menuRightList = menu3.map(item => {
          const items = {
            buttonRightList: this.form.buttonRightList,
            displayType: item.displayType === true ? 1 : 2,
            menuId: item.id,
            menuName: item.name,
            parentId: item.parentId,
            sort: item.sort,
            sysId: item.sysId,
            url: item.url
          }
          return items
        })
        var system3 = menu3.filter(item3 => {
          if (item3.parentId === 0) {
            return item3
          }
        })
        // console.log(system)
        this.form.sysRightList = [{
          displayType: visible3,
          menuRightList: menuRightList,
          sysId: system3[0].sysId,
          sysName: system3[0].name
        }]
        // console.log(this.form.sysRightList)
      }
    },
    handleChange4(v) {
      if (v === false) {
        this.$refs.tree4[0].setCheckedKeys([])
      } else {
        var newArr = this.setTree44.map(item => item.id)
        this.$refs.tree4[0].setCheckedKeys(newArr)
        var menu4 = this.$refs.tree4[0].getCheckedNodes().concat(this.$refs.tree4[0].getHalfCheckedNodes())
        // console.log(menu4)
        // console.log(this.form.sysRightList)
        var visible4 = this.v4 === undefined ? 1 : this.v4 === true ? 1 : 2
        // console.log(visible2)
        var menuRightList = menu4.map(item => {
          const items = {
            buttonRightList: this.form.buttonRightList,
            displayType: item.displayType === true ? 1 : 2,
            menuId: item.id,
            menuName: item.name,
            parentId: item.parentId,
            sort: item.sort,
            sysId: item.sysId,
            url: item.url
          }
          return items
        })
        var system4 = menu4.filter(item4 => {
          if (item4.parentId === 0) {
            return item4
          }
        })
        // console.log(system)
        this.form.sysRightList = [{
          displayType: visible4,
          menuRightList: menuRightList,
          sysId: system4[0].sysId,
          sysName: system4[0].name
        }]
        // console.log(this.form.sysRightList)
      }
    },
    handleChange5(v) {
      if (v === false) {
        this.$refs.tree5[0].setCheckedKeys([])
      } else {
        var newArr = this.setTree55.map(item => item.id)
        this.$refs.tree5[0].setCheckedKeys(newArr)
        var menu5 = this.$refs.tree5[0].getCheckedNodes().concat(this.$refs.tree5[0].getHalfCheckedNodes())
        // console.log(menu5)
        // console.log(this.form.sysRightList)
        var visible5 = this.v5 === undefined ? 1 : this.v5 === true ? 1 : 2
        // console.log(visible5)
        var menuRightList = menu5.map(item => {
          const items = {
            buttonRightList: this.form.buttonRightList,
            displayType: item.displayType === true ? 1 : 2,
            menuId: item.id,
            menuName: item.name,
            parentId: item.parentId,
            sort: item.sort,
            sysId: item.sysId,
            url: item.url
          }
          return items
        })
        var system5 = menu5.filter(item5 => {
          if (item5.parentId === 0) {
            return item5
          }
        })
        // console.log(system)
        this.form.sysRightList.push({
          displayType: visible5,
          menuRightList: menuRightList,
          sysId: system5[0].sysId,
          sysName: system5[0].name
        })
        // console.log(this.form.sysRightList)
      }
    },
    handleChange6(v) {
      if (v === false) {
        this.$refs.tree6[0].setCheckedKeys([])
      } else {
        var newArr = this.setTree66.map(item => item.id)
        this.$refs.tree6[0].setCheckedKeys(newArr)
        var menu6 = this.$refs.tree6[0].getCheckedNodes().concat(this.$refs.tree6[0].getHalfCheckedNodes())
        // console.log(menu2)
        // console.log(this.form.sysRightList)
        var visible6 = this.v6 === undefined ? 1 : this.v6 === true ? 1 : 2
        // console.log(visible2)
        var menuRightList = menu6.map(item => {
          const items = {
            buttonRightList: this.form.buttonRightList,
            displayType: item.displayType === true ? 1 : 2,
            menuId: item.id,
            menuName: item.name,
            parentId: item.parentId,
            sort: item.sort,
            sysId: item.sysId,
            url: item.url
          }
          return items
        })
        var system6 = menu6.filter(item6 => {
          if (item6.parentId === 0) {
            return item6
          }
        })
        // console.log(system)
        this.form.sysRightList.push({
          displayType: visible6,
          menuRightList: menuRightList,
          sysId: system6[0].sysId,
          sysName: system6[0].name
        })
        // console.log(this.form.sysRightList)
      }
    },
    handleChange7(v) {
      if (v === false) {
        this.$refs.tree7[0].setCheckedKeys([])
      } else {
        var newArr = this.setTree77.map(item => item.id)
        this.$refs.tree7[0].setCheckedKeys(newArr)
        var menu7 = this.$refs.tree7[0].getCheckedNodes().concat(this.$refs.tree7[0].getHalfCheckedNodes())
        // console.log(menu7)
        // console.log(this.form.sysRightList)
        var visible7 = this.v7 === undefined ? 1 : this.v7 === true ? 1 : 2
        // console.log(visible2)
        var menuRightList = menu7.map(item => {
          const items = {
            buttonRightList: this.form.buttonRightList,
            displayType: item.displayType === true ? 1 : 2,
            menuId: item.id,
            menuName: item.name,
            parentId: item.parentId,
            sort: item.sort,
            sysId: item.sysId,
            url: item.url
          }
          return items
        })
        var system7 = menu7.filter(item7 => {
          if (item7.parentId === 0) {
            return item7
          }
        })
        // console.log(system)
        this.form.sysRightList.push({
          displayType: visible7,
          menuRightList: menuRightList,
          sysId: system7[0].sysId,
          sysName: system7[0].name
        })
        // console.log(this.form.sysRightList)
      }
    },
    handleChange8(v) {
      if (v === false) {
        this.$refs.tree8[0].setCheckedKeys([])
      } else {
        var newArr = this.setTree88.map(item => item.id)
        this.$refs.tree8[0].setCheckedKeys(newArr)
        var menu8 = this.$refs.tree8[0].getCheckedNodes().concat(this.$refs.tree8[0].getHalfCheckedNodes())
        // console.log(menu8)
        // console.log(this.form.sysRightList)
        var visible8 = this.v8 === undefined ? 1 : this.v8 === true ? 1 : 2
        // console.log(visible2)
        var menuRightList = menu8.map(item => {
          // console.log(item)
          const items = {
            buttonRightList: this.form.buttonRightList,
            displayType: item.displayType === true ? 1 : 2,
            menuId: item.id,
            menuName: item.name,
            parentId: item.parentId,
            sort: item.sort,
            sysId: item.sysId,
            url: item.url
          }
          return items
        })
        var system8 = menu8.filter(item8 => {
          if (item8.parentId === 0) {
            return item8
          }
        })
        // console.log(system)
        this.form.sysRightList.push({
          displayType: visible8,
          menuRightList: menuRightList,
          sysId: system8[0].sysId,
          sysName: system8[0].name
        })
        // console.log(this.form.sysRightList)
      }
    },
    handleChange9(v) {
      if (v === false) {
        this.$refs.tree9[0].setCheckedKeys([])
      } else {
        var newArr = this.setTree99.map(item => item.id)
        this.$refs.tree9[0].setCheckedKeys(newArr)
        var menu9 = this.$refs.tree9[0].getCheckedNodes().concat(this.$refs.tree9[0].getHalfCheckedNodes())
        // console.log(menu9)
        // console.log(this.form.sysRightList)
        var visible9 = this.v9 === undefined ? 1 : this.v9 === true ? 1 : 2
        // console.log(visible2)
        var menuRightList = menu9.map(item => {
          const items = {
            buttonRightList: this.form.buttonRightList,
            displayType: item.displayType === true ? 1 : 2,
            menuId: item.id,
            menuName: item.name,
            parentId: item.parentId,
            sort: item.sort,
            sysId: item.sysId,
            url: item.url
          }
          return items
        })
        var system9 = menu9.filter(item9 => {
          if (item9.parentId === 0) {
            return item9
          }
        })
        // console.log(system9)
        // console.log('menuRightList', this.form.menuRightList)
        this.form.sysRightList.push({
          displayType: visible9,
          menuRightList: menuRightList.length > 0 ? menuRightList : [],
          sysId: system9.length > 0 ? system9[0].sysId : '',
          sysName: system9.length > 0 ? system9[0].name : ''
        })
        // console.log(this.form.sysRightList)
      }
    },
    handleChange(val) {
      const arr = []
      // console.log(val)
      val.map(item1 => {
        // console.log(item1)
        this.sysList.map(item => {
          if (item1 === item.id) {
            // console.log(item)
            // console.log(this.list1)
            if (this.list1 !== undefined) {
              var items = {
                displayType: this.list1 === true ? 1 : 2,
                sysId: item.id,
                sysName: item.name,
                menuRightList: this.form.menuRightList
              }
              arr.push(items)
              this.form.sysRightList = arr
              // console.log(arr)
              return this.form.sysRightList
            }
          }
        })
      })
      // console.log(this.form.sysRightList)
    },
    handleCheckChange(type) {
      if (type === 1) {
        // console.log(this.disTypeList)
        const menu1 = this.$refs.tree1[0].getCheckedNodes().concat(this.$refs.tree1[0].getHalfCheckedNodes())
        this.menu1 = menu1.map(val => {
          // console.log(val)
          const params = {
            displayType: val.displayType === true ? 1 : 2,
            menuId: val.id,
            menuName: val.name,
            parentId: val.parentId,
            sort: val.sort,
            sysId: 1,
            url: val.url,
            buttonRightList: [this.formOrigin.buttonRightList[0]]
          }
          // console.log(params)
          return params
        })
      } else {
        this.menu1 = this.$refs.tree1[0].getCheckedNodes().concat(this.$refs.tree1[0].getHalfCheckedNodes())
      }

      if (type === 2) {
        // console.log(this.form)
        const menu2 = this.$refs.tree2[0].getCheckedNodes().concat(this.$refs.tree2[0].getHalfCheckedNodes())
        this.menu2 = menu2.map(val => {
          // console.log(val)
          const params = {
            displayType: val.displayType === true ? 1 : 2,
            menuId: val.id,
            menuName: val.name,
            parentId: val.parentId,
            sort: val.sort,
            sysId: 2,
            url: val.url,
            buttonRightList: [this.formOrigin.buttonRightList[0]]
          }
          // console.log(params)
          return params
        })
      } else {
        this.menu2 = this.$refs.tree2[0].getCheckedNodes().concat(this.$refs.tree2[0].getHalfCheckedNodes())
      }

      if (type === 3) {
        const menu3 = this.$refs.tree3[0].getCheckedNodes().concat(this.$refs.tree3[0].getHalfCheckedNodes())
        this.menu3 = menu3.map(val => {
          // console.log(val)
          const params = {
            displayType: val.displayType === true ? 1 : 2,
            menuId: val.id,
            menuName: val.name,
            parentId: val.parentId,
            sort: val.sort,
            sysId: 3,
            url: val.url,
            buttonRightList: [this.formOrigin.buttonRightList[0]]
          }
          return params
        })
      } else {
        this.menu3 = this.$refs.tree3[0].getCheckedNodes().concat(this.$refs.tree3[0].getHalfCheckedNodes())
      }

      if (type === 4) {
        const menu4 = this.$refs.tree4[0].getCheckedNodes().concat(this.$refs.tree4[0].getHalfCheckedNodes())
        this.menu4 = menu4.map(val => {
          // console.log(val)
          const params = {
            displayType: val.displayType === true ? 1 : 2,
            menuId: val.id,
            menuName: val.name,
            parentId: val.parentId,
            sort: val.sort,
            sysId: 4,
            url: val.url,
            buttonRightList: [this.formOrigin.buttonRightList[0]]
          }
          return params
        })
      } else {
        this.menu4 = this.$refs.tree4[0].getCheckedNodes().concat(this.$refs.tree4[0].getHalfCheckedNodes())
      }

      if (type === 5) {
        const menu5 = this.$refs.tree5[0].getCheckedNodes().concat(this.$refs.tree5[0].getHalfCheckedNodes())
        this.menu5 = menu5.map(val => {
          // console.log(val)
          const params = {
            displayType: val.displayType === true ? 1 : 2,
            menuId: val.id,
            menuName: val.name,
            parentId: val.parentId,
            sort: val.sort,
            sysId: 5,
            url: val.url,
            buttonRightList: [this.formOrigin.buttonRightList[0]]
          }
          return params
        })
      } else {
        this.menu5 = this.$refs.tree5[0].getCheckedNodes().concat(this.$refs.tree5[0].getHalfCheckedNodes())
      }

      if (type === 6) {
        const menu6 = this.$refs.tree6[0].getCheckedNodes().concat(this.$refs.tree6[0].getHalfCheckedNodes())
        this.menu6 = menu6.map(val => {
          // console.log(val)
          const params = {
            displayType: val.displayType === true ? 1 : 2,
            menuId: val.id,
            menuName: val.name,
            parentId: val.parentId,
            sort: val.sort,
            sysId: 6,
            url: val.url,
            buttonRightList: [this.formOrigin.buttonRightList[0]]
          }
          return params
        })
      } else {
        this.menu6 = this.$refs.tree6[0].getCheckedNodes().concat(this.$refs.tree6[0].getHalfCheckedNodes())
      }

      if (type === 7) {
        const menu7 = this.$refs.tree7[0].getCheckedNodes().concat(this.$refs.tree7[0].getHalfCheckedNodes())
        this.menu7 = menu7.map(val => {
          // console.log(val)
          const params = {
            displayType: val.displayType === true ? 1 : 2,
            menuId: val.id,
            menuName: val.name,
            parentId: val.parentId,
            sort: val.sort,
            sysId: 7,
            url: val.url,
            buttonRightList: [this.formOrigin.buttonRightList[0]]
          }
          return params
        })
      } else {
        this.menu7 = this.$refs.tree7[0].getCheckedNodes().concat(this.$refs.tree7[0].getHalfCheckedNodes())
      }

      if (type === 8) {
        const menu8 = this.$refs.tree8[0].getCheckedNodes().concat(this.$refs.tree8[0].getHalfCheckedNodes())
        // console.log(menu8)
        this.menu8 = menu8.map(val => {
          // console.log(val)
          const params = {
            displayType: val.displayType === true ? 1 : 2,
            menuId: val.id,
            menuName: val.name,
            parentId: val.parentId,
            sort: val.sort,
            sysId: 8,
            url: val.url,
            buttonRightList: [this.formOrigin.buttonRightList[0]]
          }
          return params
        })
      } else {
        this.menu8 = this.$refs.tree8[0].getCheckedNodes().concat(this.$refs.tree8[0].getHalfCheckedNodes())
      }

      if (type === 9) {
        const menu9 = this.$refs.tree9[0].getCheckedNodes().concat(this.$refs.tree9[0].getHalfCheckedNodes())
        this.menu9 = menu9.map(val => {
          // console.log(val)
          const params = {
            displayType: val.displayType === true ? 1 : 2,
            menuId: val.id,
            menuName: val.name,
            parentId: val.parentId,
            sort: val.sort,
            sysId: 9,
            url: val.url,
            buttonRightList: [this.formOrigin.buttonRightList[0]]
          }
          return params
        })
      } else {
        this.menu9 = this.$refs.tree9[0].getCheckedNodes().concat(this.$refs.tree9[0].getHalfCheckedNodes())
      }

      this.menus = [...this.menu1, ...this.menu2, ...this.menu3, ...this.menu4, ...this.menu5, ...this.menu6, ...this.menu7, ...this.menu8, ...this.menu9]
      // console.log(this.menus)
      // console.log(this.menus)
      this.form.sysRightList.map(item1 => {
        item1.menuRightList = this.menus.filter(item => {
          // console.log(item, item1)
          if (item.sysId === 1 && item1.sysId === 1) {
            // console.log(item, item1)
            const items = {
              buttonRightList: item.buttonRightList,
              displayType: item.displayType === true ? 1 : item.displayType === 1 ? item.displayType : 2,
              menuId: item.id,
              menuName: item.name,
              parentId: item.parentId,
              sort: item.sort,
              sysId: item.sysId,
              url: item.url
            }
            return items
          }
          if (item.sysId === 2 && item1.sysId === 2) {
            const items = {
              buttonRightList: item.buttonRightList,
              displayType: item.displayType === true ? 1 : item.displayType === 1 ? item.displayType : 2,
              menuId: item.id,
              menuName: item.name,
              parentId: item.parentId,
              sort: item.sort,
              sysId: item.sysId,
              url: item.url
            }
            return items
          }
          if (item.sysId === 3 && item1.sysId === 3) {
            const items = {
              buttonRightList: item.buttonRightList,
              displayType: item.displayType === true ? 1 : item.displayType === 1 ? item.displayType : 2,
              menuId: item.id,
              menuName: item.name,
              parentId: item.parentId,
              sort: item.sort,
              sysId: item.sysId,
              url: item.url
            }
            return items
          }
          if (item.sysId === 4 && item1.sysId === 4) {
            const items = {
              buttonRightList: item.buttonRightList,
              displayType: item.displayType === true ? 1 : item.displayType === 1 ? item.displayType : 2,
              menuId: item.id,
              menuName: item.name,
              parentId: item.parentId,
              sort: item.sort,
              sysId: item.sysId,
              url: item.url
            }
            return items
          }
          if (item.sysId === 5 && item1.sysId === 5) {
            const items = {
              buttonRightList: item.buttonRightList,
              displayType: item.displayType === true ? 1 : item.displayType === 1 ? item.displayType : 2,
              menuId: item.id,
              menuName: item.name,
              parentId: item.parentId,
              sort: item.sort,
              sysId: item.sysId,
              url: item.url
            }
            return items
          }
          if (item.sysId === 6 && item1.sysId === 6) {
            const items = {
              buttonRightList: item.buttonRightList,
              displayType: item.displayType === true ? 1 : item.displayType === 1 ? item.displayType : 2,
              menuId: item.id,
              menuName: item.name,
              parentId: item.parentId,
              sort: item.sort,
              sysId: item.sysId,
              url: item.url
            }
            return items
          }
          if (item.sysId === 7 && item1.sysId === 7) {
            const items = {
              buttonRightList: item.buttonRightList,
              displayType: item.displayType === true ? 1 : item.displayType === 1 ? item.displayType : 2,
              menuId: item.id,
              menuName: item.name,
              parentId: item.parentId,
              sort: item.sort,
              sysId: item.sysId,
              url: item.url
            }
            return items
          }
          if (item.sysId === 8 && item1.sysId === 8) {
            const items = {
              buttonRightList: item.buttonRightList,
              displayType: item.displayType === true ? 1 : item.displayType === 1 ? item.displayType : 2,
              menuId: item.id,
              menuName: item.name,
              parentId: item.parentId,
              sort: item.sort,
              sysId: item.sysId,
              url: item.url
            }
            return items
          }
          if (item.sysId === 9 && item1.sysId === 9) {
            return
          }
        })
        return item1.menuRightList
      })
      // console.log(this.form.sysRightList)
    },
    // 查询所有机构弹窗
    handleSelect() {
      this.selectVisible = true
    },
    // 机构信息更新回调
    handleSelectUpdate(row) {
      // console.log(row)
      this.form.orgName = row.name
      this.form.orgId = row.id
    },
    // 获取平台列表
    getSystemList() {
      findPlatforms().then(res => {
      // findSysList('', '', 1, 10).then(res => {
        if (res.code === '000000') {
          // console.log(res)
          // this.displayTypes = res.data.map(item => item.id)
          // this.systemList = res.data.map(item => item.id)
          this.sysList = res.data
        }
        // console.log(this.sysList)
      })
    },
    // 获取公司能够使用的系统下的所有权限
    handleGetSysMenu() {
      findMenuList(this.param.id, this.param.name, this.param.pageIndex, this.param.pageSize, 1).then(res => {
        if (res.code === '000000') {
          // console.log('sysList1', res.data)
          this.sysMenu1 = res.data
          this.setTree11 = res.data.map(item => {
            const items = {
              displayType: item.displayType === null ? 1 : item.displayType,
              id: item.id,
              name: item.name,
              parentId: item.parentId,
              sort: item.sort,
              sysId: item.sysId,
              sysName: item.sysName,
              url: item.url,
              version: item.version
            }
            return items
          })
          // console.log('sysList1', this.setTree11)
          // this.checked1 = res.data.map(item => item.id)
          const list = res.data.map(item => {
            const items = {
              displayType: item.displayType === null ? true : item.displayType,
              id: item.id,
              name: item.name,
              parentId: item.parentId,
              sort: item.sort,
              sysId: item.sysId,
              sysName: item.sysName,
              url: item.url,
              version: item.version
            }
            return items
          })
          this.setTree1 = transData(list, 'id', 'parentId')
          // this.setTree1 = transData(res.data, 'id', 'parentId')
        }
      })
      findMenuList(this.param.id, this.param.name, this.param.pageIndex, this.param.pageSize, 2).then(res => {
        if (res.code === '000000') {
          // console.log('sysList2', res.data)
          this.sysMenu2 = res.data
          this.setTree22 = res.data.map(item => {
            const items = {
              displayType: item.displayType === null ? 1 : item.displayType,
              id: item.id,
              name: item.name,
              parentId: item.parentId,
              sort: item.sort,
              sysId: item.sysId,
              sysName: item.sysName,
              url: item.url,
              version: item.version
            }
            return items
          })
          // this.checked2 = res.data.map(item => item.id)
          const list = res.data.map(item => {
            const items = {
              displayType: item.displayType === null ? true : item.displayType,
              id: item.id,
              name: item.name,
              parentId: item.parentId,
              sort: item.sort,
              sysId: item.sysId,
              sysName: item.sysName,
              url: item.url,
              version: item.version
            }
            return items
          })
          this.setTree2 = transData(list, 'id', 'parentId')
          // this.setTree2 = transData(res.data, 'id', 'parentId')
        }
      })
      findMenuList(this.param.id, this.param.name, this.param.pageIndex, this.param.pageSize, 3).then(res => {
        if (res.code === '000000') {
          // console.log('sysList3', res.data)
          this.sysMenu3 = res.data
          this.setTree33 = res.data.map(item => {
            const items = {
              displayType: item.displayType === null ? 1 : item.displayType,
              id: item.id,
              name: item.name,
              parentId: item.parentId,
              sort: item.sort,
              sysId: item.sysId,
              sysName: item.sysName,
              url: item.url,
              version: item.version
            }
            return items
          })
          // this.checked3 = res.data.map(item => item.id)
          const list = res.data.map(item => {
            const items = {
              displayType: item.displayType === null ? true : item.displayType,
              id: item.id,
              name: item.name,
              parentId: item.parentId,
              sort: item.sort,
              sysId: item.sysId,
              sysName: item.sysName,
              url: item.url,
              version: item.version
            }
            return items
          })
          this.setTree3 = transData(list, 'id', 'parentId')
          // this.setTree3 = transData(res.data, 'id', 'parentId')
        }
      })
      findMenuList(this.param.id, this.param.name, this.param.pageIndex, this.param.pageSize, 4).then(res => {
        if (res.code === '000000') {
          // console.log('sysList4', res.data)
          this.sysMenu4 = res.data
          this.setTree44 = res.data.map(item => {
            const items = {
              displayType: item.displayType === null ? 1 : item.displayType,
              id: item.id,
              name: item.name,
              parentId: item.parentId,
              sort: item.sort,
              sysId: item.sysId,
              sysName: item.sysName,
              url: item.url,
              version: item.version
            }
            return items
          })
          // this.checked4 = res.data.map(item => item.id)
          const list = res.data.map(item => {
            const items = {
              displayType: item.displayType === null ? true : item.displayType,
              id: item.id,
              name: item.name,
              parentId: item.parentId,
              sort: item.sort,
              sysId: item.sysId,
              sysName: item.sysName,
              url: item.url,
              version: item.version
            }
            return items
          })
          this.setTree4 = transData(list, 'id', 'parentId')
          // this.setTree4 = transData(res.data, 'id', 'parentId')
        }
      })
      findMenuList(this.param.id, this.param.name, this.param.pageIndex, this.param.pageSize, 5).then(res => {
        if (res.code === '000000') {
          // console.log('sysList5', res.data)
          this.sysMenu5 = res.data
          this.setTree55 = res.data.map(item => {
            const items = {
              displayType: item.displayType === null ? 1 : item.displayType,
              id: item.id,
              name: item.name,
              parentId: item.parentId,
              sort: item.sort,
              sysId: item.sysId,
              sysName: item.sysName,
              url: item.url,
              version: item.version
            }
            return items
          })
          // this.checked5 = res.data.map(item => item.id)
          const list = res.data.map(item => {
            const items = {
              displayType: item.displayType === null ? true : item.displayType,
              id: item.id,
              name: item.name,
              parentId: item.parentId,
              sort: item.sort,
              sysId: item.sysId,
              sysName: item.sysName,
              url: item.url,
              version: item.version
            }
            return items
          })
          this.setTree5 = transData(list, 'id', 'parentId')
          // this.setTree5 = transData(res.data, 'id', 'parentId')
        }
      })
      findMenuList(this.param.id, this.param.name, this.param.pageIndex, this.param.pageSize, 6).then(res => {
        if (res.code === '000000') {
          // console.log('sysList6', res.data)
          this.sysMenu6 = res.data
          this.setTree66 = res.data.map(item => {
            const items = {
              displayType: item.displayType === null ? 1 : item.displayType,
              id: item.id,
              name: item.name,
              parentId: item.parentId,
              sort: item.sort,
              sysId: item.sysId,
              sysName: item.sysName,
              url: item.url,
              version: item.version
            }
            return items
          })
          // this.checked6 = res.data.map(item => item.id)
          const list = res.data.map(item => {
            const items = {
              displayType: item.displayType === null ? true : item.displayType,
              id: item.id,
              name: item.name,
              parentId: item.parentId,
              sort: item.sort,
              sysId: item.sysId,
              sysName: item.sysName,
              url: item.url,
              version: item.version
            }
            return items
          })
          this.setTree6 = transData(list, 'id', 'parentId')
          // this.setTree6 = transData(res.data, 'id', 'parentId')
        }
      })
      findMenuList(this.param.id, this.param.name, this.param.pageIndex, this.param.pageSize, 7).then(res => {
        if (res.code === '000000') {
          // console.log('sysList7', res.data)
          this.sysMenu7 = res.data
          this.setTree77 = res.data.map(item => {
            const items = {
              displayType: item.displayType === null ? 1 : item.displayType,
              id: item.id,
              name: item.name,
              parentId: item.parentId,
              sort: item.sort,
              sysId: item.sysId,
              sysName: item.sysName,
              url: item.url,
              version: item.version
            }
            return items
          })
          // this.checked7 = res.data.map(item => item.id)
          const list = res.data.map(item => {
            const items = {
              displayType: item.displayType === null ? true : item.displayType,
              id: item.id,
              name: item.name,
              parentId: item.parentId,
              sort: item.sort,
              sysId: item.sysId,
              sysName: item.sysName,
              url: item.url,
              version: item.version
            }
            return items
          })
          this.setTree7 = transData(list, 'id', 'parentId')
          // this.setTree7 = transData(res.data, 'id', 'parentId')
        }
      })
      findMenuList(this.param.id, this.param.name, this.param.pageIndex, this.param.pageSize, 8).then(res => {
        if (res.code === '000000') {
          // console.log('sysList8', res.data)
          this.sysMenu8 = res.data
          this.setTree88 = res.data.map(item => {
            const items = {
              displayType: item.displayType === null ? 1 : item.displayType,
              id: item.id,
              name: item.name,
              parentId: item.parentId,
              sort: item.sort,
              sysId: item.sysId,
              sysName: item.sysName,
              url: item.url,
              version: item.version
            }
            return items
          })
          // this.checked8 = res.data.map(item => item.id)
          const list = res.data.map(item => {
            const items = {
              displayType: item.displayType === null ? true : item.displayType,
              id: item.id,
              name: item.name,
              parentId: item.parentId,
              sort: item.sort,
              sysId: item.sysId,
              sysName: item.sysName,
              url: item.url,
              version: item.version
            }
            return items
          })
          this.setTree8 = transData(list, 'id', 'parentId')
          // this.setTree8 = transData(res.data, 'id', 'parentId')
        }
      })
      findMenuList(this.param.id, this.param.name, this.param.pageIndex, this.param.pageSize, 9).then(res => {
        if (res.code === '000000') {
          // console.log('sysList9', res.data)
          this.sysMenu9 = res.data
          this.setTree99 = res.data.map(item => {
            const items = {
              displayType: item.displayType === null ? 1 : item.displayType,
              id: item.id,
              name: item.name,
              parentId: item.parentId,
              sort: item.sort,
              sysId: item.sysId,
              sysName: item.sysName,
              url: item.url,
              version: item.version
            }
            return items
          })
          // this.checked9 = res.data.map(item => item.id)
          const list = res.data.map(item => {
            const items = {
              displayType: item.displayType === null ? true : item.displayType,
              id: item.id,
              name: item.name,
              parentId: item.parentId,
              sort: item.sort,
              sysId: item.sysId,
              sysName: item.sysName,
              url: item.url,
              version: item.version
            }
            return items
          })
          this.setTree9 = transData(list, 'id', 'parentId')
          // this.setTree9 = transData(res.data, 'id', 'parentId')
        }
      })
    },
    handleCloseDialog() {
      this.$emit('handleCloseDialog')
    },

    handleExportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/excel/Export2Excel')
        const tHeader = ['系统ID', '资源图标', '父资源', '资源ID', '资源名称', '资源顺序', '资源类型', '资源链接']
        const filterVal = ['sysId', 'iconUrl', 'parentId', 'resourceId', 'orgName', 'resourceSort', 'resourceType', 'resourceUrl']
        const data = this.formatJson(filterVal, this.dataList)
        export_json_to_excel(tHeader, data, '系统平台权限资源表(' + formatDateTime().ymd) + ')'
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
  }
}
</script>

<style lang="scss">
@import "@/styles/public.scss";
.role-dialog {
  .role-dialog-content {
    width: 1400px;
    height: 900px;
    margin: 0 0 0 -200px;
    background: #ffffff;
    .role-content {
      .role-header {
        .checkbox {
          .checkgou {
            position: absolute;
            top: 0;
            right: 20px;
            .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
              background-color: #3cb371;
              border-color: #3cb371;
            }
            .el-checkbox__input.is-checked+.el-checkbox__label {
              color: #3cb371;
            }
          }
          .group {
            width: 900px;
            margin: 0 auto;
            position: relative;
            // .checkss {}
            .checks {
              width: 270px;
              height: 240px;
            }
            .check6 {
              // margin-left: -30px;
            }
          }
          .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;
            .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
              background-color: #3cb371;
              border-color: #3cb371;
            }
            .el-checkbox__input.is-checked+.el-checkbox__label {
              color: #3cb371;
            }
          }
          .grow1 {
            position: absolute;
            top: 86px;
            left: -32px;
            right: 0;
          }
          .grow2 {
            position: absolute;
            top: 86px;
            left: 238px;
            right: 0;
          }
          .grow3 {
            position: absolute;
            top: 86px;
            left: 508px;
            right: 0;
          }
          .grow4 {
            position: absolute;
            top: 326px;
            left: -32px;
            right: 0;
          }
          .grow5 {
            position: absolute;
            top: 326px;
            left: 238px;
            right: 0;
          }
          .grow6 {
            position: absolute;
            top: 326px;
            left: 508px;
            right: 0;
          }
          .grow7 {
            position: absolute;
            top: 564px;
            left: -32px;
            right: 0;
          }
          .grow8 {
            position: absolute;
            top: 564px;
            left: 238px;
            right: 0;
          }
          .grow9 {
            position: absolute;
            top: 564px;
            left: 508px;
            right: 0;
          }
          .tree-grow {
            max-width: 260px;
            height: 200px;
            // margin-left: -24px;
            margin-left: -124px;
            .check-title {
              line-height: 34px;
              background: #3cb371;
              font-size: 12px;
            }
            .sysTree {
              height: 160px;
              overflow: auto;
              .coTree {
                // overflow: auto;
                height: 160px;
                .el-tree-node .el-checkbox .el-checkbox__inner {
                  display: block !important;
                }
              }
            }
          }
        }
        .role-select {
          margin-left: -280px;
        }
        .roleName {
          margin-left: -130px;
        }
        .role-admin {
          margin-left: -104px;
        }
        .role-org {
          .com-select {
            width: 100px;
            height: 40px;
          }
        }
        .role-find {
          margin-left: -114px;
        }
      }
    }
  }
}
</style>
